<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li {
				float: left;
				background-image: url(img/bg1.gif);
				width: 100px;
				height: 33px;
				background-repeat: no-repeat;
				text-align: center;
				line-height: 33px;
				margin-right: 1px;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="mydiv">
			<ul type="none">
				<li>婚纱</li>
				<li>人像</li>
				<li>儿童</li>
				<li>静物</li>
			</ul>
		</div>
		<script type="text/javascript">
			var lis=document.getElementById("mydiv").getElementsByTagName("li");
			for (var i = 0; i < lis.length; i++) {
				lis[i].onmouseover=function  () {
					this.style.backgroundImage="url(img/bg2.gif)";
					this.style.color="orange"
				}
				lis[i].onmouseout=function  () {
					this.style.backgroundImage="url(img/bg1.gif)";
					this.style.color="white"
				}
				
			}
		</script>
	</body>

</html>